<template>
  <div>
    <p class="ht-form-title" style="margin-top: 24px">相关单据</p>
    <el-row style="margin-top: 16px">
      <ht-table
        class="ht-table-no-border"
        :data="state.dataSource"
        border
        :hide-page="true"
        pageStyle="text-align:right"
        highlight-current-row
        :columns="otherColumn"
      >
        <template slot="handel" slot-scope="{ row }">
          <ht-more @callback="(e) => handelMore(e, row)" showTabs="">
            操作
            <i class="el-icon-arrow-down"></i>
            <el-dropdown-item slot="dropdown" command="detail">
              详情
            </el-dropdown-item>
          </ht-more>
        </template>
      </ht-table>
    </el-row>
    <DetailsInfo
      v-if="state.visible"
      :id="state.id"
      :type="state.businessType"
      :visible="state.visible"
      @callback="callback"
    >
    </DetailsInfo>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import ElementUI from "element-ui";
import { Column } from "htui-yllkbz/src/packages/type";
import { BusinessLinkApi, BusinessLinkDto } from "@/plugins/api";
import { _axios } from "vue-kst-auth";
import DetailsInfo from "@/exports/detailsInfo.vue";
Vue.use(ElementUI, { zIndex: 3000 });
interface State {
  /** 数据状态 */
  loading: boolean;
  dataSource: BusinessLinkDto[];
  /** BusinessLinkDto */
  visible: boolean;
  /** 详情Id */
  id?: string;
  /** 详情类型 */
  businessType?: number;
}
@Component({
  components: {
    DetailsInfo,
  },
})
export default class Index extends Vue {
  BusinessLinkApi = new BusinessLinkApi("/spare-part-management-service", _axios);
  /**  通用样式 */
  @Prop() id!: string;
  /** 数据 */
  state: State = {
    loading: false,
    visible: false,
    dataSource: [],
    id: undefined,
    businessType: undefined,
  };
  /** 生命周期 */
  /** 方法 */
  handelMore(e: string, row: BusinessLinkDto) {
    if (e === "detail") {
      this.state.visible = true;
      this.state.id = row.businessId;
      this.state.businessType = row.businessType;
    }
  }
  callback() {
    this.state.visible = false;
    this.state.id = undefined;
    this.state.businessType = undefined;
  }
  /** 监听 */
  @Watch("id", { immediate: true })
  OnId(val: string | undefined) {
    if (val) {
      this.BusinessLinkApi.businessLinks(val, undefined, undefined, 0, 20).then(
        (res) => {
          this.state.dataSource = res.items || [];
        }
      );
    } else {
      this.state.dataSource = [];
    }
  }

  /** 相关单据 */
  get otherColumn(): Column[] {
    return [
      { key: "businessTitle", title: "单据名称" },
      { key: "businessCode", title: "单号" },
      { key: "businessName", title: "类别" },
      { key: "handel", title: "操作" },
    ];
  }
}
</script>
<style>
@import url("/publicData/styles/theme/fonts/element-icons.woff");
@import url("/publicData/styles/theme/index.css");
</style>
<style lang="scss" scoped></style>
